<template>
  <div style="margin: 20px;">
    <div style="width: 70%;">
      <div class="title">分销规则</div>
      <div class="flex_css">
        <div class="mar_Right" style="width: 125px;">最大分销层级</div>
        <div>
          <el-select v-model="highest_level" placeholder="请选择层级" @change="changelevel">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
      </div>
      <!-- 层级end-->
      <div>
        <div class="flex_css">
          <div class="mar_Right">单次最低提现金额</div>
          <div>
            <el-input v-model="minimal_withdraw_limit" style="min-width: 50px;margin-right: 10px;">
              <template slot="append">元</template>
            </el-input>
          </div>
        </div>
        <div class="tips_css" style="margin-top: -5px;">最近一次更新时间：{{commonValue.updated_at}}</div>
      </div>
      <div style="text-align: left;margin-top: 30px;margin-bottom: 30px;">
        <el-button type="primary" @click="keepRules">保存</el-button>
      </div>
    </div>

    <!-- 分销等级 -->
    <div>
      <div class="title">分销商等级</div>
      <div style="margin: 20px;">
        <!--<el-button type="primary" style="margin-bottom: 10px;" @click="addmodel">添加</el-button>-->
        <el-table :data="tableData" border style="width: 100%;" v-loading="loading" :header-cell-style="{background:'#eef1f6',color:'#606266'}">
          <el-table-column align="center" prop="id" label="序号" />
          <el-table-column align="center" prop="rule_name" label="分销商等级名称" />
          <el-table-column align="center" prop="grade" label="等级排序" />
          <el-table-column align="center" prop="first_ratio" label="一级佣金比率" />
          <el-table-column align="center" prop="secondary_ratio" label="二级佣金比率" />
          <el-table-column align="center" prop="secondary_ratio" label="三级佣金比率" />
          <!--<el-table-column align="center" prop="address" label="升级条件" />
          <el-table-column align="center" prop="address" label="自动升级" />
          <el-table-column align="center" prop="address" label="状态" />-->
          <el-table-column align="center" prop="address" label="操作">
            <!--<template slot-scope="scope">
              <el-button type="text">编辑</el-button>
              <el-button style="color: red" type="text">删除</el-button>
            </template>-->
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 添加模态款 -->
    <el-dialog :title="title" :visible.sync="modelMsg">
      <div class="msgDiv">
        <div>
          <el-form ref="form" :model="form" label-width="120px">
            <!-- 基础信息 -->
            <div style="font-weight: bold;">基础信息</div>
            <div style="margin: 20px;">
              <el-form-item label="分销商等级名称" :required="true">
                <el-input v-model="form.rule_name" class="input_css" placeholder="请输入分销商等级名称"></el-input>
              </el-form-item>
             <!-- <el-form-item label="等级排序" :required="true">
                <el-input v-model="form.phone" class="input_css" placeholder="请输入等级排序"></el-input><span class="tips_css" style="margin: 0;">(数字越大，级别越高)</span>
              </el-form-item> -->
              <el-form-item label="佣金比率" :required="true">
                <div style="margin-top: 10px;">
                  <el-input v-model="form.first_ratio" class="input_css" placeholder="请输入一级分销佣金比率">
                    <template slot="append">%</template>
                  </el-input>
                  <span>一级分销佣金比率</span>
                </div>
                <div style="margin-top: 10px;">
                  <el-input v-model="form.secondary_ratio" class="input_css" placeholder="请输入二级分销佣金比率">
                    <template slot="append">%</template>
                  </el-input>
                  <span>二级分销佣金比率</span>
                </div>
                <div style="margin-top: 10px;">
                  <el-input v-model="form.three_ratio" class="input_css" placeholder="请输入三级分销佣金比率">
                    <template slot="append">%</template>
                  </el-input>
                  <span>三级分销佣金比率</span>
                </div>
              </el-form-item>
              <!-- <el-form-item label="自动升级" :required="true">
                <div style="margin-left: 20px;">
                  <el-radio v-model="autoUpgrade" label="1">支持</el-radio>
                  <el-radio v-model="autoUpgrade" label="2">不支持</el-radio>
                </div>
              </el-form-item> -->
              <el-form-item label="默认升级" :required="true">
                <div style="margin-left: 20px;">
                  <el-radio v-model="autoUpgrade" label="1">是</el-radio>
                  <el-radio v-model="autoUpgrade" label="2">否</el-radio>
                </div>
                <div style="margin-top: -10px;color:#b5b5b5;">注：即为用户成为分销商时的初始分销商等级</div>
              </el-form-item>
            </div>
            <!-- 升级条件 -->
            <!-- <div>
              <div style="font-weight: bold;">升级条件</div>
              <div style="margin: 20px;">
                 <div>
                    累计发展下级分销商数量达到
                    <el-input v-model="form.username" class="input_css" placeholder="请输入人数">
                      <template slot="append">人</template>
                    </el-input>
                  </div>
                  <div>
                      <span class="btnAndOr_css">或</span>
                      <span class="btnAndOr_css">与</span>
                  </div>
              </div>
            </div> -->
          </el-form>
          <div style="text-align: center;">
            <el-button type="success" @click="addMsg(form)">{{addORupdate}}</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        highest_level: "",
        minimal_withdraw_limit: "",
        loading: false,
        modelMsg: false,
        title: "",
        addORupdate: "",
        form: {},
        options: [{
          value: '1',
          label: '一级'
        }, {
          value: '2',
          label: '二级'
        }, {
          value: '3',
          label: '三级'
        }],
        value: '',
        autoUpgrade: "1",
        tableData: [],
        searchParams: {
          page: 1,
          limit: 8
        },
        commonValue: ''
      }
    },

    mounted() {

      this.getDistributionRule()
      this.getCommonValue()

    },

    methods: {
      //提交店铺入驻申请
      async addMsg(form) {
        if (form.id > 0) {
          /* 修改 */
          /* 显示加载中。。。 */
          const loadingOne = this.$loading({
            lock: true,
            text: '保存中...',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
        }
        },
      //选择默认生升级
      changelevel(val) {
        this.highest_level = val
      },
      //保存分销规则
      keepRules() {

        if(!this.minimal_withdraw_limit){
          this.$message.error('请填写单次最低体现金额')
          return
        }

        /* 显示加载中。。。 */
        const loadingOne = this.$loading({
          lock: true,
          text: '保存中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        let params = {
          highest_level: this.highest_level,
          minimal_withdraw_limit: this.minimal_withdraw_limit
        }
        this.$api.setCommonValue(params).then(res => {
          this.$message({
            type: res.data.level,
            message: res.data.message
          });
          this.getCommonValue()
          loadingOne.close()
        })

      },

      async getDistributionRule(){
        this.tableLoadingShow = true;
        let params = {
          limit: this.searchParams.limit,
          page: this.searchParams.page
        }
        const res = await this.$api.getDistributionRule(params);
        if(res.data.level=='success'){
          let list = res.data.data;
          this.tableData = list;
          this.pageTotal = res.data.page_info.total
        }else {
          this.$message.error(res.data.message)
        }
        this.tableLoadingShow = false;
      },

      async getCommonValue(){
        const res = await this.$api.getCommonValue();
        if(res.data.level=='success'){
          this.commonValue = res.data.data
          this.highest_level = this.commonValue.highest_level
          this.minimal_withdraw_limit = this.commonValue.minimal_withdraw_limit
        }else {
          this.$message.error(res.data.message)
        }
      },


      addmodel() {
        this.modelMsg = true
        this.title = '添加'
        this.addORupdate = "添加"
        this.vshow = false
        this.form.id = ""
        this.form.admin_name = ""
        this.form.username = ""
        this.form.password = ""
        this.checkPassword = ""
        this.form.phone = ""
        this.form.status = "0"
        this.form.role_id = []
        this.checkedRoles = []
        this.checkAll = false
      },
    }
  }
</script>

<style scoped="scoped">
  /deep/.el-dialog__header{
    text-align: center;
  }
  /deep/ label {
    font-weight: normal;
  }
  .title {
    font-weight: bold;
    font-size: 18px;
    color: #565656;
  }

  .flex_css {
    display: flex;
    justify-content: flex-start;
    height: 40px;
    line-height: 40px;
    margin: 20px;
  }

  .mar_Right {
    margin-right: 10px;
  }

  .tips_css {
    color: #9e9e9e;
    font-size: 14px;
    margin: 20px;
    margin-top: -20px;
  }

  .input_css {
    width: 300px;
    margin-left: 20px;
    margin-right: 10px;
  }
  .btnAndOr_css{
    display: inline-block;
    width: 45px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    border-radius: 50%;
    background: #bbb;
    margin-right: 30px;
    color: #fff;
  }

</style>
